<template>
  <div class="prompt page white" ref="webview">
    <van-nav-bar :title="title" left-arrow @click-left="$router.go(-1)" class="bg_white" />
    <div class="box" :class="{top88: type === 1 || type === 2 || type === 3, top30: type === 4}">
      <div class="icon failure"></div>
      <template v-if="type === 1">
        <div class="name">感谢您的反馈！</div>
        <div class="text">我们会及时回复您的反馈</div>
      </template>
      <template v-if="type === 2">
        <div class="name">申请已提交</div>
        <div class="text">稍后有会平台业务员联系您，请注意接听电话！</div>
      </template>
      <template v-if="type === 3">
        <div class="failure">恭喜您已完成支付!</div>
        <div class="text">感谢支持，我们已通知卖家尽快为您发货!</div>
      </template>
      <template v-if="type === 4">
        <div class="failure">恭喜您</div>
        <div class="text">您已成为入驻商家</div>
      </template>
      <div class="submit" :class="{flex:type === 3}">
        <van-button class="btn red" v-if="type === 3" @click="$router.replace({ path: '/home' })">回到商城</van-button>
        <van-button class="btn" :class="{white: type === 4 || type === 3,red: type === 1 || type === 2}" v-if="type!==4" @click="goBark">{{type === 1 || type === 2 ? '返回' :type === 3 ? '查看订单': ''}}</van-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'prompt',
  data () {
    return {
      showPayPassword: false
    };
  },
  computed: {
    type: {
      get () {
        return parseInt(this.$route.query.type);
      },
      set (val) {
        return val;
      }
    },
    title () {
      return this.type === 1 ? '意见反馈' : this.type === 2 || this.type === 4 ? '商家入驻' : '支付完成';
    }
  },
  created () {
    if (this.type === 5) {
      this.$BUS.$on('password:pay', this.withdrawSecond);
    }
  },
  methods: {
    goBark () {
      if (this.type === 1 || this.type === 2 || this.type === 3) {
        if (this.type === 3) {
          localStorage.setItem('orderStatus', 0);
          this.$router.replace({ path: '/order/list' });
        } else {
          // this.$router.go(-1);
          this.$router.push({ 'path': '/my' });
        }
      } else {
        this.$store.dispatch('setPayPassword', true);
      }
    }
  }
};
</script>
<style scoped lang="less">
.prompt.white {
  background-color: #fff;
}
.prompt {
  height: 100%;
  .box {
    .icon {
      width: 150px;
      height: 150px;
      background-repeat: no-repeat;
      background-size: contain;
      margin: 0 auto;
    }
    .icon.success {
      background-image: url('/static/images/icon-success.png');
    }
    .icon.failure {
      background-image: url('/static/images/icon-failure.png');
    }
    .icon.fugou {
      margin-top: 60px;
      background-image: url('/static/images/icon-fugou.png');
    }
    .name {
      font-size: 34px;
      padding: 30px 0 0;
      color: #353535;
      text-align: center;
    }
    .text {
      padding: 15px 0 0;
      text-align: center;
      font-size: 28px;
      color: #888;
    }
    .failure,
    .success {
      text-align: center;
      font-size: 40px;
      margin-top: 40px;
    }
    .failure {
      color: #ff0034;
    }
    .success {
      color: #7c67ff;
    }
    .submit.flex {
      display: flex;
    }
    .submit {
      margin: 45px 100px 0;
      text-align: center;
      .btn {
        width: 260px;
        flex: 1;
        height: 80px;
        margin: 0 15px;
        color: #fff;
        background-color: #917eff;
        line-height: 80px;
        border-radius: 80px;
        font-size: 34px;
        font-weight: 300;
      }
      .btn.white {
        border: 1px solid #ff0034; /*no*/
        background-color: #fff;
        color: #ff0034;
        font-weight: 400;
      }
      .btn.success {
        border: 1px solid #7c67ff; /*no*/
        background-color: #fff;
        color: #7c67ff;
        font-weight: 400;
      }
      .btn.red {
        background-color: #ff0034;
        color: #fff;
      }
    }
  }
  .box.top88 {
    padding: 68px 0;
  }
  .box.top30 {
    padding: 0;
  }
}
</style>
